import './ProjectLocation.scss'
import { useRef, useState } from 'react'
import { useMount } from 'ahooks'
import { useRequest } from 'alova/client'
import { Button, Tooltip } from "antd"
import * as mars3d from "mars3d"

import { CloseOutlined, EditOutlined, EnvironmentOutlined, AimOutlined } from '@ant-design/icons'


import { Http } from '../../API'
// import { Initialization } from '../../Map/InitFunc'

const ProjectLocation = () => {
    // const MapBox = useRef()
    // const [Map, setMap] = useState()
    // const [Gra, setGra] = useState()
    // const [Open, setOpen] = useState(false)
    // const [ListData, setListData] = useState([])
    // const { send } = useRequest(data => Http(data), { immediate: false })
    // const { send: posLocation } = useRequest(params => Http({ url: 'posTransportProjects', params }), { immediate: false })


    // const items = [
    //     { text: "项目列表", callback: () => setOpen(true) }
    // ]

    // useMount(() => {
    //     const { map, gra, clip } = Initialization(MapBox.current, {})
    //     map.bindContextMenu(items)
    //     setMap(map)
    //     setGra(gra)
    //     getData(gra)
    // })

    // const getData = (gra) => {
    //     gra.clear()
    //     send({ url: 'getTransportProjects', params: { pageIndex: 1, pageSize: 10000 } }).then(res => {
    //         setListData(res.list)
    //         res.list.forEach(item => {
    //             if (item.lng && item.lat) {
    //                 const { uuid, type, alias, lng, lat } = item
    //                 gra.addGraphic(new mars3d.graphic.PointPrimitive({
    //                     id: uuid,
    //                     position: [lng, lat, 0],
    //                     style: {
    //                         color: "#13c2c2",
    //                         pixelSize: 8,
    //                         outlineColor: "#ffffff",
    //                         outlineWidth: 2,
    //                         clampToGround: true,
    //                         label: { text: `[${type}] ${alias}`, font_size: 24, color: "#262626", outline: true, outlineColor: "#fff", pixelOffsetY: -40 }
    //                     }
    //                 }))
    //             }
    //         })
    //     })
    // }



    // const onDraw = (uuid) => {
    //     const { type, alias } = ListData.find(v => v.uuid === uuid)
    //     Gra.startDraw({
    //         type: "point",
    //         style: {
    //             color: "#13c2c2",
    //             pixelSize: 8,
    //             outlineColor: "#ffffff",
    //             outlineWidth: 2,
    //             clampToGround: true,
    //             label: { text: `[${type}] ${alias}`, font_size: 24, color: "#262626", outline: true, outlineColor: "#fff", pixelOffsetY: -40 }
    //         }
    //     }).then(res => {
    //         const [lng, lat] = res.coordinate
    //         posLocation({ uuid, lng, lat }).then(() => getData(Gra))
    //     })
    // }

    // const onLocation = (uuid) => {
    //     Map.flyToGraphic(Gra.getGraphicById(uuid))
    // }


    return (
        <div className='ProjectLocation'>
            {/* <div className={`Open animate__animated ${!Open ? 'animate__bounceInLeft' : 'animate__bounceOutLeft'}`}>
                <button className="button" onClick={() => setOpen(true)}>项目列表</button>
            </div>
            <div className='Map' ref={MapBox} />
            <div className={`PerList animate__animated ${Open ? 'animate__bounceInLeft' : 'animate__bounceOutLeft'}`}>
                <div className='Tilte'>
                    <div>项目列表</div>
                    <CloseOutlined onClick={() => setOpen(false)} />
                </div>
                <div className='List'>
                    {ListData.map(({ uuid, alias, name, remark, type, lng, lat }) => {
                        const Start = lng && lat

                        return (
                            <div className='Item' key={uuid}>
                                <div>
                                    <div>[{type}] {alias}</div>
                                    <div>{name}</div>
                                </div>
                                <div>
                                    {Start &&
                                        <Tooltip title="项目定位" placement='right'>
                                            <Button type='line' onClick={() => onLocation(uuid)} icon={<EnvironmentOutlined />} />
                                        </Tooltip>
                                    }
                                    {Start &&
                                        <Tooltip title="修改定位" placement='right'>
                                            <Button type='line' onClick={() => onDraw(uuid)} icon={<EditOutlined />} />
                                        </Tooltip>
                                    }
                                    {!Start &&
                                        <Tooltip title="添加定位" placement='right'>
                                            <Button type='line' onClick={() => onDraw(uuid)} icon={<AimOutlined />} />
                                        </Tooltip>
                                    }
                                </div>
                            </div>
                        )
                    })}
                </div>
            </div> */}
        </div>
    )
}

export default ProjectLocation;